<div class="flex flex-col flex-auto w-full p-4 sm:p-4">
    <!-- Header -->
    <div class="flex items-center justify-between mb-4 mx-3">
        <!-- Title -->
        <h1 class="text-3xl font-medium tracking-tight leading-none">Code review configurations</h1>
        <!-- Actions -->
        <div class="flex shrink-0 items-center">
            <button
                    mat-flat-button
                    color="primary"
                    (click)="openEditPage()"
                    aria-label="Add new configuration"
            >
                <mat-icon svgIcon="heroicons_outline:plus"></mat-icon>
                <span class="ml-2">New</span>
            </button>
            <button
                    class="ml-4"
                    mat-flat-button
                    [matTooltip]="'Refresh List'"
                    (click)="refreshConfigs()"
                    [disabled]="isLoading()"
            >
                <mat-icon [svgIcon]="'heroicons_outline:arrow-path'"></mat-icon>
            </button>
            <button
                    class="ml-4"
                    mat-raised-button
                    color="warn"
                    (click)="deleteSelectedConfigs()"
                    [disabled]="selection.isEmpty()"
            >
                Delete
            </button>
        </div>
    </div>
    <div class="overflow-auto bg-card rounded-lg shadow">
        @let state = configsState();
        @switch (state.status) {
            @case ('idle') {
                <div class="p-8 text-center text-secondary">Loading configurations...</div>
            }
            @case ('loading') {
                <div class="p-8 text-center text-secondary">Loading configurations...</div>
            }
            @case ('error') {
                <div class="p-8 text-center text-warn-500">{{ state.error.message }}</div>
            }
            @case ('success') {
                @if (state.data.length === 0) {
                    <div class="p-8 text-center text-secondary">No code review configurations found. Create one to get started!</div>
                } @else {
                <table mat-table [dataSource]="state.data" class="w-full mat-elevation-z0">

        <!-- column matColumnDef values needs to be in the displayedColumns property on the component -->

        <ng-container matColumnDef="title">
            <th mat-header-cell *matHeaderCellDef>Title</th>
            <td mat-cell *matCellDef="let config">
                <a (click)="openEditPage(config.id)">{{ config.title }}</a>
            </td>
        </ng-container>

        <ng-container matColumnDef="description">
            <th mat-header-cell *matHeaderCellDef>Description</th>
            <td mat-cell *matCellDef="let config" class="truncate overflow-ellipsis">
                <a (click)="openEditPage(config.id)">{{ config.description }}</a>
            </td>
        </ng-container>

        <ng-container matColumnDef="enabled">
            <th mat-header-cell *matHeaderCellDef>Enabled</th>
            <td mat-cell *matCellDef="let config">
                <mat-checkbox [disabled]="true" [checked]="config.enabled"></mat-checkbox> <!-- Use checked instead of value for mat-checkbox -->
            </td>
        </ng-container>

        <ng-container matColumnDef="select">
            <th mat-header-cell *matHeaderCellDef>Delete</th>
            <td mat-cell *matCellDef="let row">
                <mat-checkbox
                        (click)="$event.stopPropagation()"
                        (change)="$event ? selection.toggle(row) : null"
                        [checked]="selection.isSelected(row)"
                ></mat-checkbox>
            </td>
        </ng-container>

                    <tr mat-header-row *matHeaderRowDef="displayedColumns()"></tr>
                    <tr
                            mat-row
                            *matRowDef="let row; columns: displayedColumns()"
                            (click)="selection.toggle(row)"
                            class="hover:bg-gray-100 dark:hover:bg-hover cursor-pointer"
                    ></tr>
                </table>
                }
            }
        }
    </div>
</div>

